{% extends "app/base_site.html" %}
{% block title %} {% if  "add" == handle %}添加{% else %}编辑{% endif %}任务 {% endblock title %}
{% block stylesheets %}
  {{ block.super }}
<style>
  .custom-file-upload {
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
      background: #0960bd;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
    border-radius: 4px;
  }
.custom-file-upload:hover{
    background: #0D3349;
}
  .custom-file-upload > span {
      font-size: 12px;
  }

  .custom-file-upload > input {
    display: none;
  }
</style>


{% endblock stylesheets %}
{% block content %}

  <div class="right_col" role="main">

      <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
               <div class="x_title">
               <h2> {% if  "add" == handle %}添加{% else %}编辑{% endif %}任务
                    <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
                    <span id="top_msg">{{top_msg}}</span>
               </h2>
                  <div class="clearfix"></div>
              </div>
              <div class="x_content">
                  <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="x_panel">
                    <div class="x_content">

                      <form class="form-horizontal form-label-left"  method="post">

                        <div class="form-group">
                          <label class="control-label col-md-4 col-sm-4 col-xs-12">编号 </label>
                          <div class="col-md-8 col-sm-8 col-xs-12">
                             <input type="text"  value="{{ task.code }}" class="form-control" disabled="disabled">
                          </div>
                        </div>

                       <div class="form-group">
                          <label class="control-label col-md-4 col-sm-4 col-xs-12">名称 <span class="required" style="color: red;">*</span></label>
            <div class="col-md-8 col-sm-8 col-xs-12">
                            <input type="text" name="name" value="{{ task.name }}" required="required"  class="form-control">
                          </div>
                        </div>

                       <div class="form-group">
                          <label class="control-label col-md-4 col-sm-4 col-xs-12">任务类型 <span class="required" style="color: red;">*</span></label>
                        <div class="col-md-8 col-sm-8 col-xs-12">
                                 <select {% if handle == 'edit' %} disabled  {% endif %}  name="task_type" class="form-control">
                                    <option value="0">请选择</option>
                                    <option {% if task.task_type == 1 %} selected {% endif %} value="1">视频任务</option>

                                 </select>
                          </div>
                        </div>


                          <div class="form-group">
                          <label class="control-label col-md-4 col-sm-4 col-xs-12">备注
                          </label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                            <textarea name="remark" class="form-control" rows="3" placeholder="">{{ task.remark }}</textarea>
                          </div>
                        </div>

                        <div class="form-group">
                          <div class="col-md-8 col-sm-8 col-xs-12 col-md-offset-4">
                            <button type="button" onclick="window.history.go(-1)" class="btn btn-primary">取消</button>
                            <button type="button" onclick="f_submit()" class="btn btn-success">提交</button>
                          </div>
                        </div>

                      </form>
                    </div>
                  </div>
                 </div>
                  <div class="col-md-9 col-sm-9 col-xs-12">
                      <div class="x_panel">

                        <div class="x_content" >
                             <div class="form-horizontal form-label-left">
                                   <div class="form-group">
                                       <div style="margin-left: 5px;">
                                            <label class="custom-file-upload">
                                                <span><i class="fa fa-image"></i> 图片文件</span>
                                                <input type="file" name="file_image" accept="image/png,image/jpeg,image/jpg" placeholder="图片文件" onchange="f_upload_file_image()">
                                              </label>

                                           <label class="custom-file-upload">
                                                <span><i class="fa fa-folder"></i> 图片文件夹</span>
                                                 <input type="file" name="file_image_dir"  accept="image/png,image/jpeg,image/jpg"  placeholder="图片文件夹"  onchange="f_upload_file_image_dir()" multiple webkitdirectory directory>
                                              </label>

                                            <label class="custom-file-upload">
                                                <span><i class="fa fa-video-camera"></i> 视频文件</span>
                                                 <input type="file" name="file_video"  accept="video/*"  placeholder="视频文件"  onchange="f_upload_file_video()">
                                              </label>
                                                 <label class="custom-file-upload">
                                                <span><i class="fa fa-folder"></i> labelme</span>
                                                 <input type="file" name="file_labelme_dir"  accept="image/png,image/jpeg,image/jpg,application/json"  placeholder="labelme"  onchange="f_upload_file_labelme_dir()" multiple webkitdirectory directory>
                                              </label>
                                       </div>
                                  </div>
                            </div>


                            <table class="table table-striped projects">
                                <thead>
                                  <tr>
                                    <th style="width: 10%">ID</th>
                                    <th>创建用户</th>
                                    <th>文件名</th>
                                    <th>图片</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                  </tr>
                                </thead>
                                <tbody id="sampleData">
                                </tbody>
                            </table>
                            <div id="samplePageData"></div>
                        </div>
                      </div>
                  </div>
              </div>
             </div>
          </div>

    </div>

  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
<script>
let handle = "{{ handle }}";
let storageDir_www = "{{ storageDir_www }}";
let mTaskCode = "{{ task.code }}";
let ele_top_loading = $("#top_loading");
let ele_top_msg= $("#top_msg");
let ele_input_name= $("input[name='name']");
let eleInputFileImage= $("input[name='file_image']");
let eleInputFileImageDir= $("input[name='file_image_dir']");
let eleInputFileVideo= $("input[name='file_video']");
let eleInputFileLabelmeDir= $("input[name='file_labelme_dir']");
let ele_select_task_type= $("select[name='task_type']");
let ele_textarea_remark= $("textarea[name='remark']");
let eleSampleData = $("#sampleData");
let eleSamplePageData = $("#samplePageData");
let temp_cur_page = 1;//当前页面
let temp_cur_page_size = 10;

function f_sample_getIndex(page,page_size) {
    temp_cur_page = page;
    temp_cur_page_size = page_size;
    ele_top_loading.show();
    $.ajax({
           url: '/sample/getIndex',
           type: "get",
           async: true,
           data: {handle:handle,task_code:mTaskCode,"p":page,"ps":page_size},
           dataType: "json",
           timeout: 0,
           error: function () {
                   ele_top_loading.hide();
               myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               ele_top_loading.hide();
               eleSampleData.html("");
               if(res.code === 1000){
                   let data = res.data;
                   let data_length = data.length;
                   let item_html;

                   if(data_length === 0){
                        item_html = "";
                        item_html += "<tr class=\"even pointer\">";
                        item_html += "<td colspan='6'>暂无数据</td>";
                        item_html += "</tr>";
                        eleSampleData.append(item_html);
                   }else{
                       for (let i = 0; i < data.length; i++) {
                           let imgUrl = storageDir_www + "task/"+data[i]["task_code"]+"/sample/"+data[i]["new_filename"];
                           let annotation_state = data[i]["annotation_state"];

                           item_html = "";
                           item_html +="<tr><td>"+data[i]["id"]+"</td>";
                           item_html +="<td>"+data[i]["username"]+"</td>";
                           item_html +="<td>"+data[i]["old_filename"]+"</td>";
                           item_html +="<td><img onclick='f_openImg(\""+imgUrl+"\")' src=\""+imgUrl+"\" class=\"avatar\" style='cursor: pointer' alt=\"Avatar\"></td>";
                           if(annotation_state === 1){
                               item_html +="<td><span class=\"sun-state-success\">已标注</span></td>";
                           }else{
                               item_html +="<td><span class=\"sun-state-error\">未标注</span></td>";

                           }

                           item_html +="<td><div class=\"btn-group\">";
                             item_html +="<button onclick=\"f_sample('"+data[i]["task_code"]+"','"+data[i]["code"]+"')\" class=\"btn btn-sm btn-default\" type=\"button\"  data-placement=\"top\" data-toggle=\"tooltip\" title=\"标注样本\"><i class=\"fa fa-tags\"></i></button>";
                             item_html +="<button onclick=\"f_sample_postDel('"+data[i]["code"]+"')\" class=\"btn btn-sm btn-default\" type=\"button\"  data-placement=\"top\" data-toggle=\"tooltip\" title=\"删除样本\"><i class=\"fa fa-remove\"></i></button>";
                             item_html +="<button onclick=\"f_sample_postDelAnnotation('"+data[i]["code"]+"')\" class=\"btn btn-sm btn-default\" type=\"button\"  data-placement=\"top\" data-toggle=\"tooltip\" title=\"删除标注\">删除标注</button>";
                           item_html +="</div></td>";

                           item_html +="</tr>";
                            eleSampleData.append(item_html);
                       }
                       f_sample_showPageData(res.pageData)
                   }
               }
           }
        });
}
function f_sample(task_code,sample_code) {
    window.open("/sample/index?task_code="+task_code+"&sample_code="+sample_code)
}

function f_sample_postAdd(formData){
    ele_top_loading.show();
   $.ajax({
       url: "/sample/postAdd",
       type: "post",
       async: true,
       contentType:false,
       processData:false,
       data: formData,
       dataType: "json",
       timeout: 0,
       error: function () {
           ele_top_loading.hide();
           myAlert("网络异常，请确定网络正常！","error");
       },
       success: function (res) {
           ele_top_loading.hide();
           if(res.code === 1000){
               myAlert(res.msg,"success",1000);
                setTimeout(function() {
                    temp_cur_page = 1;//当前页面
                    f_sample_getIndex(temp_cur_page,temp_cur_page_size);
                }, 1000);

           }else{
               myAlert(res.msg,"error");
           }
       }
   });

}
function f_sample_postDel(code){
    ele_top_loading.show();
    $.ajax({
           url: '/sample/postDel',
           type: "post",
           async: true,
           data: {"code":code},
           dataType: "json",
           timeout: 0,
           error: function () {
               ele_top_loading.hide();
               myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               ele_top_loading.hide();
               if(1000 === res.code){
                    //temp_cur_page = 1;//当前页面
                    f_sample_getIndex(temp_cur_page,temp_cur_page_size);
               }else{
                    myAlert(res.msg,"error");
               }
           }
        });

}
function f_sample_postDelAnnotation(sample_code) {
     ele_top_loading.show();
        $.ajax({
           url: "/sample/postDelAnnotation",
           type: "post",
           async: true,
           data: {
               "sample_code":sample_code
           },
           dataType: "json",
           timeout: 0,
           error: function () {
                    ele_top_loading.hide();
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
                ele_top_loading.hide();
               if(res.code === 1000){
                   //temp_cur_page = 1;//当前页面
                    f_sample_getIndex(temp_cur_page,temp_cur_page_size);
               }else{
                   myAlert(res.msg,"error",1000);
               }
           }
        });

    }
function f_sample_showPageData(pageData) {
    let page_size = pageData["page_size"];
    let html = "";
    html+="<div class=\"col-md-12 col-sm-12 col-xs-12\"><ul class=\"pagination\">";
            html+="<li><span style=\"margin-right:10px;color:#000;\">共<span>"+pageData["page_num"]+"</span>页 / <span>"+pageData["count"]+"</span >条</span></li>";
        let pageLabels = pageData["pageLabels"];

        for (let i = 0; i < pageLabels.length; i++) {
            let cur = pageLabels[i]["cur"];
            if(cur === 1){
                html+="<li class=\"paginate_button active\"><a href=\"#\"  >"+pageLabels[i]["name"]+"</a></li>";
            }else{
                html+="<li class=\"paginate_button \"><a href=\"javascript:f_sample_getIndex("+pageLabels[i]["page"]+","+page_size+")\" >"+pageLabels[i]["name"]+"</a></li>";
            }
        }
    html+="</ul></div>";

    eleSamplePageData.html(html);
}
function f_openImg(imgUrl) {
    window.open(imgUrl)
}
function f_upload_file_image() {
    let task_type = parseInt(ele_select_task_type.val().trim());
        if(task_type !== 1){
         myAlert("请选择任务类型：视频任务 ","error");
         return false;
    }

    let file_len = eleInputFileImage[0].files.length;
       if(file_len  === 1){
           let formData = new FormData();
           formData.append("task_code",mTaskCode);
           formData.append("task_type",task_type);
           formData.append("upload_type",1);//1:图片文件 2:图片文件夹 3:视频文件 4:labelme文件夹

           for (let i = 0; i < file_len; i++) {
               let file = eleInputFileImage[0].files[i];
               let fs_name = file.name;
               let fs_size = parseInt(file.size);//文件字节大小
               let fs_size_m = parseInt(fs_size / 1024 / 1024); //换算成M单位

               formData.append("file"+i.toString(),file);
           }
           f_sample_postAdd(formData);

       }else{
           myAlert("请选择一个图片文件","error");
           return false;
       }
}
function f_upload_file_image_dir() {

    let task_type = parseInt(ele_select_task_type.val().trim());
    if(task_type !== 1){
         myAlert("请选择任务类型：视频任务","error");
         return false;
    }

      let files_len = eleInputFileImageDir[0].files.length;
       if(files_len> 0){
           let formData = new FormData();
           formData.append("task_code",mTaskCode);
           formData.append("task_type",task_type);
           formData.append("upload_type",2);//1:图片文件 2:图片文件夹 3:视频文件 4:labelme文件夹

           for (let i = 0; i < files_len; i++) {
               let file = eleInputFileImageDir[0].files[i];
               let fs_name = file.name;
               let fs_size = parseInt(file.size);//文件字节大小
               let fs_size_m = parseInt(fs_size / 1024 / 1024); //换算成M单位

               formData.append("file"+i.toString(),file);
           }
           f_sample_postAdd(formData);

       }else{
           myAlert("请至少选择一个图片文件","error");
           return false;
       }


}
function f_upload_file_video() {
    let task_type = parseInt(ele_select_task_type.val().trim());
        if(task_type !== 1){
         myAlert("请选择任务类型：视频任务 ","error");
         return false;
    }

    let file_len = eleInputFileVideo[0].files.length;
       if(file_len === 1){
           let formData = new FormData();
           formData.append("task_code",mTaskCode);
           formData.append("task_type",task_type);
           formData.append("upload_type",3);//1:图片文件 2:图片文件夹 3:视频文件 4:labelme文件夹

           for (let i = 0; i < file_len; i++) {
               let file = eleInputFileVideo[0].files[i];
               let fs_name = file.name;
               let fs_size = parseInt(file.size);//文件字节大小
               let fs_size_m = parseInt(fs_size / 1024 / 1024); //换算成M单位

               formData.append("file"+i.toString(),file);
           }
           f_sample_postAdd(formData);
       }else{
           myAlert("请选择一个视频文件","error");
           return false;
       }
}
function f_upload_file_labelme_dir() {
    let task_type = parseInt(ele_select_task_type.val().trim());
    if(task_type !== 1){
         myAlert("请选择任务类型：视频任务","error");
         return false;
    }

      let files_len = eleInputFileLabelmeDir[0].files.length;
       if(files_len> 0){
           let formData = new FormData();
           formData.append("task_code",mTaskCode);
           formData.append("task_type",task_type);
           formData.append("upload_type",4);//1:图片文件 2:图片文件夹 3:视频文件 4:labelme文件夹

           for (let i = 0; i < files_len; i++) {
               let file = eleInputFileLabelmeDir[0].files[i];
               let fs_name = file.name;
               let fs_size = parseInt(file.size);//文件字节大小
               let fs_size_m = parseInt(fs_size / 1024 / 1024); //换算成M单位

               formData.append("file"+i.toString(),file);
           }
           f_sample_postAdd(formData);

       }else{
           myAlert("请至少选择一个文件","error");
           return false;
       }
}
function f_submit() {

    let name = ele_input_name.val().trim();
    let task_type = parseInt(ele_select_task_type.val().trim());
    let remark = ele_textarea_remark.val().trim();
    if(name === ""){
        myAlert("请输入任务名称","error");
        return ;
    }
    if(task_type <= 0){
         myAlert("请选择任务类型","error");
        return ;
    }

    let handle_url;
    if(handle === "add"){
        handle_url = "/task/add";
    }
    else if(handle === "edit"){
        handle_url = "/task/edit";
    }else{
        return ;
    }
        $.ajax({
           url: handle_url,
           type: "post",
           async: true,
           data: {
               handle:handle,
               code:mTaskCode,
               task_type:task_type,
               name:name,
               remark:remark
           },
           dataType: "json",
           timeout: 0,
           error: function () {
               myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               if(res.code === 1000){
                   myAlert(res.msg,"success",1000);
                   if(handle === "add") {
                       setTimeout(function () {
                           window.location.href = "/task/index"
                       }, 1000);
                   }
               }else{
                   myAlert(res.msg,"error");
               }
           }
        });
}

$(function() {
    f_sample_getIndex(temp_cur_page,temp_cur_page_size);
});

</script>

{% endblock javascripts %}
